<template>
  <div class="home" ref="box">
    <!-- 头部结构 -->
    <div class="home-header">
      <div class="home-address">
        <p class="home-address-text" @click="toaddress">{{cityPosition}}</p>
        <img src="@/assets/images/home/homeDown.png" class="home-address-icon" />
      </div>
      <div class="home-search">
        <span class="home-search-icon">
          <img src="@/assets/images/home/homeSearch.png" alt />
        </span>
        <input type="text" class="home-search-ipt" placeholder="搜影片、影院、影人" />
      </div>
      <div class="home-calendar" @click="signin">
        <img src="@/assets/images/home/homeCalendar.png" class="home-calendar-icon" />
      </div>
    </div>
    <div class="wrapper">
      <div>
        <div class="height-box"></div>
        <div class="home-banner">
          <swiper ref="mySwiper" :options="swiperOptions" class="swipers">
            <swiper-slide class="slides" v-for="item in list" :key="item">
              <img :src="item" alt />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <!-- 热映 -->
        <div class="home-hot">
          <div class="home-hot-header">
            <titles>热映影片</titles>
            <div class="home-hot-all">
              <p @click="gomove(2)">全部</p>
              <van-icon name="arrow" color="#DFDFDF" size="12" />
            </div>
          </div>
          <div class="home-hot-content">
            <van-swipe
              class="my-swipe"
              indicator-color="white"
              height="180"
              width="110"
              :show-indicators="false"
              :loop="false"
            >
              <van-swipe-item class="home-hot-card" v-for="item in homeHotlist" :key="item.mId">
                <img :src="item.small" alt class="home-hot-photo" @click="hotcut(item.mId)" />
                <p class="home-hot-name">{{item.title}}</p>
                <van-button
                  round
                  type="info"
                  size="mini"
                  color="linear-gradient(150deg,rgba(242,91,134,1) 0%,rgba(241,172,94,1) 100%)"
                >购票</van-button>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <!-- 即将上映 -->
        <div class="home-soon">
          <div class="home-soon-header">
            <titles>即将上映</titles>
            <div class="home-soon-all">
              <p @click="gomove(1)">全部</p>
              <van-icon name="arrow" color="#DFDFDF" size="12" />
            </div>
          </div>
          <div class="home-soon-content">
            <van-swipe
              class="my-swipe"
              indicator-color="white"
              height="210"
              width="140"
              :show-indicators="false"
              :loop="false"
            >
              <van-swipe-item class="home-soon-card" v-for="item in homeSoonlist" :key="item.mId">
                <img :src="item.small" alt class="home-soon-photo" @click="hotcut(item.mId)" />
                <p class="home-soon-name">{{item.title}}</p>
                <p class="home-soon-name">{{item.show_date}}</p>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <!-- 精选预告 -->
        <div class="home-noticen">
          <div class="home-noticen-header">
            <titles>精选预告</titles>
            <div class="home-noticen-all">
              <p>更多</p>
              <van-icon name="arrow" color="#DFDFDF" size="12" />
            </div>
          </div>
          <div class="home-noticen-content">
            <van-swipe
              class="my-swipe"
              indicator-color="white"
              height="210"
              width="310"
              :show-indicators="false"
              :loop="false"
            >
              <van-swipe-item
                class="home-noticen-card"
                v-for="item in homeNoticenlist"
                :key="item.mId"
              >
                <video
                  :src="item.video[0]"
                  class="home-noticen-video"
                  controls="controls"
                  preload="Metadata"
                  :poster="item.movie.small"
                >
                  <source :src="item.video[1]" />
                  <source :src="item.video[2]" />
                </video>
                <p class="home-noticen-text">{{item.movie.genres}}</p>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </div>
      <!-- banner图 -->
      <div class="height-box"></div>
    </div>
  </div>
</template>

<script>
import titles from "./components/title";
import BScroll from "@better-scroll/core";
import "@/assets/css/reset.css";
import { mapState } from "Vuex";
export default {
  data() {
    return {
      //banner图
      list: [
        require("@/assets/images/home/Homebanner1.png"),
        require("@/assets/images/home/Homebanner2.png"),
        require("@/assets/images/home/Homebanner3.png"),
        require("@/assets/images/home/Homebanner4.png")
      ],
      swiperOptions: {
        slidesPerView: 1.2,
        spaceBetween: 5,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      //热映
      homeHotlist: [],
      //即将上映
      homeSoonlist: [],
      homeNoticenlist: []
    };
  },
  components: {
    titles
  },
  computed: {
    ...mapState({
      cityPosition: "cityPosition"
    })
  },
  created() {
    this.$axios.get("api/douban/movie/in_theaters").then(res => {
      this.homeHotlist = res.data.list;
      this.refresh();
    });
    this.$axios.get("api/douban/movie/coming_soon").then(res => {
      this.homeSoonlist = res.data.list;
      this.homeSoonlist.forEach(ele => {
        if (ele.show_date instanceof Array) {
          let arr = ele.show_date[0].substr(6, 4).split("-");
          let str = arr[0] + "月" + arr[1] + "日";
          ele.show_date = str;
        }
      });
      this.refresh();
    });
    this.$axios.get("api/douban/movie/selectPreview").then(res => {
      this.homeNoticenlist = res.data;

      this.homeNoticenlist.forEach(ele => {
        if (ele.movie.genres instanceof Array) {
          ele.movie.genres = ele.movie.genres.join("");
        }
      });
      this.refresh();
    });
  },
  mounted() {
    let wrapper = document.querySelector(".wrapper");
    this.bScroll = new BScroll(wrapper, {
      click: true
    });
  },
  methods: {
    refresh() {
      this.$nextTick(() => {
        this.bScroll.refresh();
      });
    },
    toaddress() {
      this.$router.push("/location");
    },
    signin() {
      this.$router.push("/home/signIn");
    },
    hotcut(val) {
      // this.$router.push("/movie/point");
      this.$router.push({
        name: "point",
        params: { id: val }
      });
      // this.$store.commit("mid", val);
    },
    gomove(v) {
      if (v == 1) {
        this.$router.push("/movie/coming");
      } else if (v == 2) {
        this.$router.push("/movie/hot");
      }
    }
  }
};
</script>
<style lang="scss">
.swiper-pagination {
  position: static !important;
  // margin-top: 8px;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  // transform: translateY(50px);
  z-index: 99;
}
.swiper-pagination-bullet {
  background-color: #fff !important;
  width: 4px !important;
  height: 4px !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff !important;
  width: 14px !important;
  border-radius: 30% !important;
}
</style>
<style scoped lang="scss" scoped>
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.9);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
.height-box {
  height: 60px;
  width: 100%;
}
.wrapper {
  height: 100vh;
}
.home {
  overflow: hidden;
}
//头部样式
.home-header {
  background-color: #23262d;
  width: 96%;
  margin-left: 5px;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 40px;
  padding: 5px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .home-address {
    width: 15%;
    font-size: 11px;
    color: #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    .home-address-text {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .home-address-icon {
      width: 12px;
      height: 6px;
    }
  }
  //定位
  .home-calendar {
    width: 20px;
    opacity: 0.777;
    .home-calendar-icon {
      width: 18px;
      height: 19px;
      opacity: 0.777;
    }
  }
  //打卡
  .home-search {
    width: 70%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    border-radius: 18px;
    background: rgba(51, 54, 61, 1);
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.09);
    border-radius: 18px;
    .home-search-icon {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 17px;
        height: 17px;
      }
    }

    //输入框
    .home-search-ipt {
      width: 80%;
      height: 90%;
      border: 0;
      font-size: 14px;
      color: rgba(122, 122, 122, 1);
      border-radius: 18px;
      background-color: #33363d;
    }
  }
}
.home-banner {
  margin-bottom: 12px;
  .slides {
    height: 100%;
    img {
      width: 320px;
      height: 160px;
    }
  }
}
// 热映
.home-hot {
  width: 345px;
  margin: 30px auto;
  .home-hot-header {
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .home-hot-all {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 12px;
        color: rgba(223, 223, 223, 1);
        line-height: 12px;
      }
    }
  }
  .home-hot-content {
    width: 105%;
  }
}
.home-hot-card {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-between;
  .home-hot-photo {
    width: 90px;
    height: 120px;
  }
  .home-hot-name {
    width: 60px;
    padding-left: 3px;
    text-align: left;
    font-size: 12px;
    color: rgba(223, 223, 223, 1);
    line-height: 12px;
  }
}
// 即将上映
.home-soon {
  width: 345px;
  margin: 30px auto;
  .home-soon-header {
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .home-soon-all {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 12px;
        color: rgba(223, 223, 223, 1);
        line-height: 12px;
      }
    }
  }
  .home-soon-content {
    width: 105%;
  }
}
.home-soon-card {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-between;
  .home-soon-photo {
    width: 120px;
    height: 162px;
  }
  .home-soon-name {
    width: 100px;
    padding-left: 4px;
    text-align: left;
    font-size: 12px;
    color: rgba(223, 223, 223, 1);
    line-height: 12px;
  }
}
//精选预告
.home-noticen {
  width: 345px;
  margin: 0 auto;
  margin-top: 30px;
  height: 300px;
  .home-noticen-header {
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .home-noticen-all {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 12px;
        color: rgba(223, 223, 223, 1);
        line-height: 12px;
      }
    }
  }
  .home-noticen-content {
    width: 105%;
  }
}
.home-noticen-card {
  .home-noticen-video {
    width: 295px;
    height: 160px;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
  }
  .home-noticen-text {
    width: 100%;
    margin-top: 10px;
    padding-left: 10px;
    text-align: left;
    font-size: 12px;
    color: rgba(223, 223, 223, 1);
    line-height: 18px;
  }
}
</style>
